<template>
  <div class="container">
    <div class="app-container">
      <el-card>
        <!-- 头部 -->
        <div class="header">
          <!-- 面包屑结构 -->
          <el-breadcrumb
            id="breadcrumb"
            separator-class="el-icon-arrow-right"
            v-if="$route.query.id"
          >
            <el-breadcrumb-item>学科管理</el-breadcrumb-item>
            <el-breadcrumb-item>{{ this.$route.query.name }}</el-breadcrumb-item>
            <el-breadcrumb-item>目录管理</el-breadcrumb-item>
          </el-breadcrumb>
          <el-row>
            <el-form :inline="true" label-width="70px" size="small">
              <el-col :span="18">
                <el-form-item label="目录名称">
                  <el-input v-model="form.directoryName"></el-input>
                </el-form-item>
                <el-form-item label="状态">
                  <el-select placeholder="请选择" v-model="form.state">
                    <el-option label="启用" :value="1"></el-option>
                    <el-option label="禁用" :value="0"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-button @click="clear">清除</el-button>
                  <el-button type="primary" @click="search">搜索</el-button>
                </el-form-item>
              </el-col>
            </el-form>
            <el-col :span="6" style="text-align: right">
              <el-button
                type="text"
                @click="$router.push('/subjects/list')"
                v-if="$route.query.name"
                >返回学科</el-button
              >
              <el-button type="success" @click="addDirectorys" size="small"
                >新增目录</el-button
              >
            </el-col>
          </el-row>
          <el-alert
            :title="`数据一共 ${total} 条`"
            type="info"
            show-icon
            :closable="false"
          >
          </el-alert>
        </div>
        <!-- 表格 -->
        <el-table :data="directorysList" style="width: 100%">
          <el-table-column type="index" label="序号" width="70"></el-table-column>
          <el-table-column prop="subjectName" label="所属学科"></el-table-column>
          <el-table-column prop="directoryName" label="目录名称"> </el-table-column>
          <el-table-column prop="username" label="创建者"> </el-table-column>
          <el-table-column prop="addDate" label="创建日期">
            <template #default="{ row }">
              {{ formattingTime(row.addDate) }}
            </template>
          </el-table-column>
          <el-table-column prop="totals" label="面试题数量"></el-table-column>
          <el-table-column prop="state" label="状态">
            <template #default="{ row }">
              {{ row.state ? "已启用" : "已禁用" }}
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template #default="{ row }">
              <el-button type="text" @click="handleDisabled(row)">
                <span v-if="row.state === 1">禁用</span>
                <span v-else>启用</span>
              </el-button>
              <el-button
                type="text"
                @click="edit(row)"
                :disabled="row.state === 0"
                >修改</el-button
              >
              <el-button type="text" @click="del(row)" :disabled="row.state === 0"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div style="height: 40px; margin-top: 20px">
          <el-pagination
            background
            style="float: right"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="form.page"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="form.pagesize"
            layout=" prev, pager, next,sizes,jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </el-card>
    </div>
    <!-- 弹窗 -->
    <DirectorysAdd
      @closeDialog="closeDialogFn"
      @add-directorys="getDirectorysList"
      ref="directorysAdd"
      :tagDetail="tagDetail"
      :showDialog="showDialog"
    >
    </DirectorysAdd>
  </div>
</template>

<script>
import { list, remove, detail, changeState } from '@/api/hmmm/directorys.js'
import DirectorysAdd from '@/module-hmmm/components/directorys-add.vue'
import dayjs from 'dayjs'
export default {
  name: 'Directorys',
  components: {
    DirectorysAdd
  },
  data () {
    return {
      form: {
        page: 1, // 当前页数
        pagesize: 10, // 每页条数
        directoryName: '', // 标签名称
        subjectID: null, // 学科Id
        state: null // 状态
      },
      directorysList: [], // 标签列表
      total: 0, // 标签总数
      showDialog: false, // 弹窗
      tagDetail: {} // 单个点击的标签详情
    }
  },
  created () {
    this.getDirectorysList()
  },
  methods: {
    // 1,获取标签列表
    async getDirectorysList () {
      if (this.$route.query.id) {
        const { data: { counts, items } } = await list({ ...this.form, subjectID: this.$route.query.id })
        this.total = counts
        this.directorysList = items
      } else {
        const { data: { counts, items } } = await list(this.form)
        this.total = counts
        this.directorysList = items
      }
    },
    handleSizeChange (val) {
      this.form.pagesize = val
      this.getDirectorysList()
    },
    handleCurrentChange (val) {
      this.form.page = val
      this.getDirectorysList()
    },
    // 关闭弹窗
    closeDialogFn () {
      this.showDialog = false
    },
    // 删除功能
    del (row) {
      this.$confirm('此操作将永久删除该文章，是否继续', '提示', { type: 'warning' }).then(async () => {
        await remove(row)
        this.$message.success('删除成功')
        if (this.directorysList.length === 1 && this.page > 1) {
          this.page--
        }
        this.getDirectorysList()
      })
    },
    // 新增功能打开弹窗
    addDirectorys () {
      this.showDialog = true
    },
    // 修改功能打开弹窗
    edit (row) {
      this.showDialog = true
      this.tagDetail = row
      this.getDirectorysDetail()
    },
    // 获取标签详情，回显数据
    async getDirectorysDetail () {
      const res = await detail(this.tagDetail)
      this.tagDetail = res.data
    },
    // 格式化时间
    formattingTime (time) {
      return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
    },
    // 处理禁用
    async handleDisabled (row) {
      await changeState({
        ...row,
        state: row.state === 1 ? 0 : 1
      })
      this.$message.success('操作成功')
      this.getDirectorysList()
    },
    // 搜索功能
    search () {
      this.page = 1
      this.getDirectorysList()
    },
    // 清除功能
    clear () {
      this.form.directoryName = ''
      this.form.state = null
    }
  }
}
</script>

<style scoped lang='scss'>
#breadcrumb {
  padding-bottom: 15px;
  margin-bottom: 20px;
  border-bottom: 1px solid #ebeef5;

}
</style>
